<template>
  <div>
    <div v-if="hasContract" v-loading="loading">
      <pdf-view
        ref="union"
        @print="handlePrint"
        :contractId="docId"
        :view-mode="viewMode"
        downName="保费缴纳通知书"
        :sig-no="sigNo"
      ></pdf-view>
    </div>
    <div class="p-5 bg-light rounded text-center" v-else>
      <i class="fa fa-info-circle text-muted mb-3" style="font-size: 3rem"></i>
      <div class="text-center">还没有委托担保合同</div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import PdfView from '@/credit/views/county/unionProvince/components/PdfView'
export default {
  components: {
    PdfView,
  },
  props: {
    queryId: String,
    viewMode: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      loading: false,
    }
  },
  watch: {
    queryId: {
      handler: function () {
        this.getData()
      },
      immediate: true,
    },
  },
  computed: {
    ...mapGetters(['entrustContract']),
    contractId() {
      return this.entrustContract.entrust_contract_id
    },
    hasContract() {
      return !!this.contractId
    },
    docId() {
      return this.entrustContract.gua_fee_doc_id
    },
    sigNo() {
      return this.entrustContract.gua_fee_sign_no
    },
  },
  created() {},
  methods: {
    handlePrint() {
      this.$emit('print', true)
    },
    getData() {
      this.loading = true
      this.$store.dispatch('getEntrustContract', this.queryId).finally(() => {
        this.loading = false
      })
    },
  },
}
</script>
<style lang="scss" scoped></style>
